<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	    <link rel="stylesheet" href="../../admin/css/other/result.css" />
	</head>
	<body class="pear-container">
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-body">
						<div id="column1" style="min-height:400px;"></div>
					</div>
				</div>
			</div>
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-body">
						<div id="column2" style="min-height:400px;"></div>
					</div>
				</div>
			</div>
<!--			<div class="layui-col-md6">-->
<!--				<div class="layui-card">-->
<!--					<div class="layui-card-body">-->
<!--						<div id="column3" style="min-height:400px;"></div>-->
<!--					</div>-->
<!--				</div>-->
<!--			</div>-->
<!--			<div class="layui-col-md6">-->
<!--				<div class="layui-card">-->
<!--					<div class="layui-card-body">-->
<!--						<div id="column4" style="min-height:400px;"></div>-->
<!--					</div>-->
<!--				</div>-->
<!--			</div>-->
		</div>
		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>
			layui.use(['echarts'], function() {
				let echarts = layui.echarts;

				var column1 = echarts.init(document.getElementById('column1'));
				option = {
					title: {
						text: '设备健康状态表'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow' ,
							textStyle: {
								color: '#fff',
								fontSize: '26'
							},
						}
					},
					legend: {
						top:'5%',
						right:'10%',
						data: ['健康状态', '待维修状态'],
						textStyle:{
							fontSize:12,
							color:'#808080'
						},
						icon:'rect'
					},
					grid: {
						top:60,
						left:50,
						bottom:60,
						right:60
					},
					xAxis: [{
						type: 'category',
						axisTick:{
							show:false
						},
						axisLine:{
							show:false
						},
						axisLabel:{
							color:'#4D4D4D',
							fontSize:14,
							margin:21,
							fontWeight:'bold'
						},
						data: [],

					}],
					yAxis: [{
						name:'单位：个',
						nameTextStyle:{
							color:'#808080',
							fontSize:12,
							padding:[0, 0, 0, -5]
						},
						max: function(value) {
							if(value.max<5){
								return 5
							}else{
								return value.max
							}
						},
						type: 'value',
						axisLine:{
							show:false
						},
						axisLabel:{
							color:'#808080',
							fontSize:12,
							margin:5
						},
						splitLine:{
							show:false
						},
						axisTick:{
							show:false
						}
					}],
					series: [
						{
							name: '健康状态',
							type: 'bar',
							label:{
								show:true,
								position:'top',
								fontSize:14,
								color:'#3DC3F0',
								fontWeight:'bold'
							},
							barMaxWidth:60,
							itemStyle:{
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: '#3DC3F0' // 0% 处的颜色
									}, {
										offset: 1, color: '#CCF2FF' // 100% 处的颜色
									}]
								}
							},
							data: [12]
						},
						{
							name: '待维修状态',
							type: 'bar',
							label:{
								show:true,
								position:'top',
								fontSize:14,
								color:'#3D8BF0',
								fontWeight:'bold'
							},
							barMaxWidth:60,
							itemStyle:{
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: '#3D8BF0' // 0% 处的颜色
									}, {
										offset: 1, color: '#CCE2FF' // 100% 处的颜色
									}]
								}
							},
							data: [8]
						}
					]
				};

				column1.setOption(option);

				window.onresize = function() {
					column1.resize();
				}
			})
		</script>

		<script>
			layui.use(['echarts'], function() {
				let echarts = layui.echarts;

				var column2 = echarts.init(document.getElementById('column2'));

				var data = [1000, 600, 500, 300];
				option = {
					backgroundColor: '#ffffff',
					title: {
						text: '设备使用状态表',
						left: 'center',
						top: 2,
						textStyle: {
							fontSize: 20
						},
					},
					color: ['#fed46b','#2194ff', ],
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '10%',
						containLabel: true
					},
					legend: {
						left: 'center',
						bottom: '2%',
						data: ['未使用', '使用中', ]
					},
					xAxis: [{
						type: 'category',
						data: [],
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						name:'单位：个',
						type: 'value'
					}],
					barMaxWidth: '30',
					label:{
						show:true,
						position:'top',
						formatter:function(params){
							return params.value
						}
					},
					series: [

						{
							name: '未使用',
							type: 'bar',
							data: [9]
						},
						{
							name: '使用中',
							type: 'bar',
							data: [11]
						},
					]
				};
				column2.setOption(option);

				window.onresize = function() {
					column2.resize();
				}
			})
		</script>


	</body>
</html>
